
import React, { Component } from 'react';
import {
  View, Text, StyleSheet, TouchableOpacity, ScrollView
} from 'react-native';
import { style } from '../../theme/style';
import { GLOBAL } from '../../config/global';
const scale = GLOBAL.SCALE;


export class NewAccountHome extends Component {

  constructor(props) {
    super(props)
    this.state = {
      companyIndex: 0
    }
  }
  componentWillUnMount() {
  }

  _tabs = (index) => {
    this.setState({
      companyIndex: index
    }, () => {
      this.props.fn(this.state.companyIndex)
    })
  }
  render() {
    let { accountStyles, textColor, imgUrl, imgStyle, options } = this.props;
    return (
      <View>
        {options.length > 4 ?
          <ScrollView horizontal={true} style={styles.tabWrap}>
            {
              options.map((item, index) => {
                return (
                  <TouchableOpacity activeOpacity={1}
                    onPress={() => { this._tabs(index); }}
                    key={index}
                    style={styles.tabItem}>
                    <Text style={[styles.tabText, this.state.companyIndex == index ? { fontWeight: 'bold' } : { opacity: .8 }]} numberOfLines={1}>{item.corpName}</Text>
                    {/* 
                      rowCount 出入口通知单用 
                      taskCnt  泉化担保日延期申请审批 用
                    */}
                    <Text style={[styles.tabNum, this.state.companyIndex == index ? { fontWeight: 'bold' } : { opacity: .8 }]}>{item.rowCount || item.taskCnt}</Text>
                  </TouchableOpacity>
                )
              })
            }
          </ScrollView> :
          <View style={styles.tabWraps}>
            {
              options.map((item, index) => {
                return (
                  <TouchableOpacity activeOpacity={1}
                    onPress={() => { this._tabs(index); }}
                    key={index}
                    style={styles.tabItem}>
                    <Text style={[styles.tabText, this.state.companyIndex == index ? { fontWeight: 'bold' } : { opacity: .8 }]} numberOfLines={1}>{item.corpName}</Text>
                    <Text style={[styles.tabNum, this.state.companyIndex == index ? { fontWeight: 'bold' } : { opacity: .8 }]}> {item.rowCount || item.taskCnt}</Text>
                  </TouchableOpacity>
                )
              })
            }
          </View>
        }

      </View>
    )
  }
}
const styles = StyleSheet.create({
  tabWrap: {
    backgroundColor: style.color.themeColor,
    height: 50 * scale
  },
  tabWraps: {
    backgroundColor: style.color.themeColor,
    height: 50 * scale,
    flexDirection: 'row',
    alignItems: 'center'
  },
  tabItem: {
    flex: 1,
    paddingTop: 15 * scale,
    paddingBottom: 15 * scale,
    paddingLeft: 16 * scale,
    paddingRight: 16 * scale,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    overflow: 'hidden'
  },
  tabText: {
    color: '#fff',
    flexWrap: 'wrap',
    overflow: 'hidden',
  },
  tabNum: {
    color: '#fff'
  }
})
